<template>
    <div>
        <div class="layout-main">
            <div style="display:flex;item-align:center;padding-top:10px;padding-bottom:10px;margin-top:50px;margin-bottom:30px">  
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item :to="{ path: '/supplyDemand' }">供需展示</el-breadcrumb-item>
                    <el-breadcrumb-item>需求详情</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="d-wrapper">
                <div style="position:absolute;top:35px;left:0px;width:80%;box-shadow: gray 0px 0px 10px 2px;">
                    <el-card  class="text-area">
                        <div style="font-size:20px;font-weight:bold;">{{ item.reqName }}</div>
                        <div>商品种类:{{ item.reqTypeId }}</div>
                        <div>需求方联系方式:{{ item.firmPhone }}</div>
                        <div>需求方邮箱:{{ item.firmEmail }}</div>
                    </el-card >
                </div>
            </div>
            <div>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span style="font-weight:bold">需求详情</span>
                    </div>
                    <div class="text item">
                        {{ item.req_desc }}
                    </div>
                </el-card>
                <div></div>
            </div>



        </div>
    </div>
</template>

<script>
import axios from "@/utils/request";

export default ({
    data() {
        return{
            queryInfo:{'id':this.$route.params.id},
            item:{'requirementId':'1','reqName':'商品型号A','reqTypeId':'铝锭','firmName':'某公司','firmPhone':'182011204411','firmEmail':'example@eecc.com','req_desc':'aluminium一词是从古罗马语 alumen(明矾)衍生而来的。1746年德国人波特(J.H.Pott)从明矾制得一种氧化物,即氧化铝。18世纪法国的拉瓦锡(A.L.Lavoisier)认为这是一种未知金属的氧化物，它与氧的亲和力极大，以致不可能用碳和当时已知的其他还原剂将它还原出来。1807年英国人戴维（H.Davy）试图电解熔融的氧化铝以取得金属，没有成功，1809年他将这种想象中的金属命名为alumium，后来改为aluminium。1825年丹麦人奥斯忒（H.C.Oersted）用钾汞齐还原无水氯化铝,第一次得到几毫克金属铝，指出它具有与锡相同的颜色和光泽。1827年德国沃勒(F.W?hler)用钾还原无水氯化铝得到少量金属粉末。1845年他用氯化铝气体通过熔融金属钾的表面,得到一些铝珠,每颗重约10～15毫克，从而对铝的密度和延展性作了初步测定，指出铝的熔点不高。1854年法国德维尔（S.C.Deville）用钠代替钾还原NaAlCl4络合盐，制得金属铝。'},
            imgsrc:"../assets/logo.png",
            url:"http://localhost:8009/lv-industry-app/requirement/"
        };
    },
    created()
    {
        this.getItem()
    },
    methods:{

        async getItem(){
            // const {data:res} = await this.$http.get(this.url,this.queryInfo)
            // this.item = res.item;
             await axios.get(this.url+this.queryInfo.id).then((result)=>{
                 console.log(result)
                 if(result.success == true)
                 {
                     this.item = result.data
                 }
             })
        },
    },

})
</script>

<style scoped>

.layout-main
{
    margin-left: 120px;
    margin-right: 120px

}
/* 分两边的 */
.d-wrapper
{
    
    display:flex;
    justify-content: center;
    position:relative;
    width:100%;
    height:400px;
    margin-top:30px;
    margin-bottom:30px;
}
  .text {
    font-size: 14px;
    text-align: left;
  }

.text-area
{
    font-size: 14px;
    text-align: left;
    line-height: 60px;
}

  .item {
    margin-bottom: 18px;
  }

  .clearfix
  {
    text-align:left;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    box-shadow: gray 0px 0px 10px 2px;
    width: 80%;
    margin-bottom:30px;
  }
#TA
{
   
   height:300px;
   width:80%;
   padding:20px 20px 10px 10px;
   margin-top:80px;
   margin-bottom:30px;
   padding-top:30px;
   padding-bottom:30px;
   box-sizing: border-box;
   position:relative;

}
</style>